<template>
  <a-modal
    :title="titleMap"
    :width="550"
    :visible.sync="visible"
    :body-style="{ 'padding-top': '0px' }"
    @ok="submit"
    @cancel="close"
    :ok-text="$t('user.verification-code.required1166')"
    :cancel-text="$t('user.email.required11')"
  >
    <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-form-item
        :label="$t('user.verification-code.required111566110577264')"
      >
        <a-select
          :placeholder="$t('user.verification-code.required111566110577264')"
          v-decorator="[
            'UserIds',
            {
              rules: [
                {
                  required: true,
                  message: $t('user.verification-code.required111566110577264'),
                },
              ],
            },
          ]"
          option-filter-prop="children"
          :filter-option="filterOption"
          show-search
        >
          <a-select-option
            v-for="item in userList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!-- 222222 -->
      <a-form-item
        :label="$t('user.verification-code.required11156611057737144226')"
      >
        <a-textarea
          :placeholder="
            $t('user.verification-code.required11156611057737144226')
          "
          v-decorator="[
            'Userchange',
            {
              rules: [
                {
                  required: true,
                  message: $t(
                    'user.verification-code.required11156611057737144226'
                  ),
                },
              ],
            },
          ]"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { DcoQuery, userQuery } from "@/api/common/form";
import { exchangeList } from "@/api/dpia/form";
export default {
  props: {
    chapterId: {
      type: Number,
    },
    idname: {
      type: Number,
    },
    id: {
      type: Number,
    },
    username: {
      type: String,
    },
    DcoId22: {
      type: Number,
    },
    idd: {
      type: Number,
    },
  },
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      loading: false,
      userList: [],
      id: "",
      chapterId: "",
      // 这个要根据服务修改title
      titleMap: "",
      // titleMap: ['新建', '修改'],
      mode: 0,
    };
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async open(data = {}) {
      this.id = this.id;
      this.chapterId = this.chapterId;
      this.titleMap = this.$t(
        "user.verification-code.required11156611057737144226"
      );
      this.visible = true;
      // 获取用户列表下拉
      const { data: userList } = await DcoQuery({ ApprovalAlias: "DCO" });
      this.userList = userList.filter((item) => {
        return item.value !== this.$store.state.user.info.YtId;
      });
    },
    // 提交 通用的
    submit() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            // 判断状态是新增还是修改 调用不同的api
            await exchangeList({
              DpiaQid: this.id,
              DpiaCommentsDCOid: this.$store.state.user.info.YtId,
              DpiaCommentsDCO: this.$store.state.user.info.YtAdminUserName,
              DpiaCommentsInfo: params.Userchange,
              DpiaCommentsExchangeDcoId: params.UserIds,
              DpiaCommentsType: 3,
            });

            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit("succeed");
            this.$message.success(
              this.$t("menu.account.logout11229922779945445432654445566")
            );
            //如果成功就关闭
            this.close();
            this.$emit("success");
            this.$emit("successAll");
          } catch (error) {
            console.log("err", error);
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    // 关闭 通用的
    close() {
      // 修改侧边栏状态
      this.visible = false;
      // 清空form的值
      this.form.resetFields();
    },
  },
};
</script>
  
<style lang="less" scoped>
:deep(.ant-form) {
  padding-top: 20px;
  .ant-form-item-label {
    display: inline-block;
    overflow: visible;
    line-height: 39.9999px;
    text-align: right;
    vertical-align: middle;
  }
}
</style>